<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> - 添加护工</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
    <style>
        .form-group .radio,.form-group .checkbox {
            display: inline-block;
        }
        .headImg-show{
            width: 120px;
            height: 144px;
            background-image: url(./images/person.png);
            background-size: 100%;
            display: inline-block;
            vertical-align: middle;
        }
        .headImg-show img{
            width: 120px;
            height: 144px;
            background-color: #ffffff;
        }
        .upload-btn{
            display: inline-block;
            vertical-align: middle;
            margin-left: 10px;
        }
        .upload-btn input[type=file]{
            position: absolute;
            width: 109px;
            height: 30px;
            opacity: 0;
            top:50%;
            margin-top: -18px;
        }
        .prompt{
            line-height: 30px;
        }
        .mt-group{
            margin-top: 8px;
        }
        .service_case,.tranin_his,.prove_box{
            position: relative;
        }
        .deletesItem,.deletetItem,.deleteprove{
            position: absolute;
            right:0;
            top:0;
        }
        .i-input-error{
            padding-top: 7px;
        }
    </style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>新增护工信息</h5>
                    </div>
                    <div class="ibox-content">
                        <form method="get" class="form-horizontal" id="worker_form">
                            <div class="tabs-container">
                                <ul class="nav nav-tabs" id="tabs">
                                    <li class="active"><a href="#baseInfo" aria-expanded="true">基本信息</a>
                                    </li>
                                    <li class=""><a href="#skillInfo" aria-expanded="false">技能信息</a>
                                    </li>
                                </ul>
                                <div class="tab-content">
                                    <div id="baseInfo" class="tab-pane active">
                                        <div class="panel-body">
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label">头像</label>
                                                <div class="col-sm-8">
                                                     <div class="headImg-show">
                                                     </div>
                                                     <div class="upload-btn headImg-btn">
                                                         <button class="btn btn-default"><i class="fa fa-upload"></i>上传头像</button>
                                                         <input type="file" name="headimg" id="img-file"/>
                                                         <span>支持jpg.png.jpeg格式图片</span>
                                                     </div>
                                                </div>
                                            </div>
                                            <div class="hr-line-dashed"></div>
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label">护工姓名</label>
                                                <div class="col-sm-3 i-input-parent">
                                                    <input type="text" class="form-control" name="worker_name" id="worker_name">
                                                </div>
                                                <div class="col-sm-2 i-input-error">
                                                </div>
                                            </div>
                                             <div class="hr-line-dashed"></div>
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label">联系电话</label>
                                                <div class="col-sm-3 i-input-parent">
                                                    <input type="text" class="form-control" name="worker_mobile" id="worker_mobile">
                                                </div>
                                                <div class="col-sm-2 i-input-error">
                                                </div>
                                            </div>
                                            <div class="hr-line-dashed"></div>
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label">性别</label>
                                                <div class="col-sm-3">
                                                    <div class="radio i-checks">
                                                        <label>
                                                          <input type="radio" value="1" name="sex"> <i></i> 男</label>
                                                    </div>
                                                    <div class="radio i-checks">
                                                        <label>
                                                         <input type="radio" checked="" value="2" name="sex"> <i></i>女</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="hr-line-dashed"></div>
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label">生日</label>
                                                <div class="col-sm-3 i-input-parent">
                                                    <input class="form-control layer-date" placeholder="请选择出生年月日" name="birthday" id="birthday" onclick="laydate({istime: true, format: 'YYYY-MM-DD'})">
                                                </div>
                                                <div class="col-sm-2 i-input-error">
                                                </div>
                                            </div>
                                            <div class="hr-line-dashed"></div>
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label">年龄</label>
                                                <div class="col-sm-3">
                                                    <input type="text" class="form-control" name="age">
                                                </div>
                                                <div class="col-sm-3">
                                                    <span class="prompt">岁</span>
                                                </div>
                                            </div>
                                            <div class="hr-line-dashed"></div>
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label">籍贯</label>
                                                <div class="col-sm-3">
                                                    <input type="text" class="form-control" name="worker_addr">
                                                </div>
                                            </div>
                                            <div class="hr-line-dashed"></div>
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label">护龄</label>
                                                <div class="col-sm-3">
                                                    <input type="text" class="form-control" name="age">
                                                </div>
                                                <div class="col-sm-3">
                                                    <span class="prompt">年</span>
                                                </div>
                                            </div>
                                            <div class="hr-line-dashed"></div>
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label">语言</label>
                                                <div class="col-sm-8">
                                                    <div class="checkbox i-checks">
                                                        <label>
                                                            <input type="checkbox" value=""> <i></i> 普通话
                                                        </label>
                                                    </div>
                                                    <div class="checkbox i-checks">
                                                        <label>
                                                            <input type="checkbox" value=""> <i></i> 广东话
                                                        </label>
                                                    </div>
                                                    <div class="checkbox i-checks">
                                                        <label>
                                                            <input type="checkbox" value=""> <i></i> 潮汕话
                                                        </label>
                                                    </div>
                                                    <div class="checkbox i-checks">
                                                        <label>
                                                            <input type="checkbox" value=""> <i></i> 客家话
                                                        </label>
                                                    </div>
                                                    <div class="checkbox i-checks">
                                                        <label>
                                                            <input type="checkbox" value=""> <i></i> 闽南语
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="hr-line-dashed"></div>
                                            <div class="form-group">
                                                <div class="col-sm-4 col-sm-offset-2">
                                                    <div class="btn btn-info btn-lg" id="nextStep">下一步</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="skillInfo" class="tab-pane">
                                        <div class="panel-body">
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label">陪护类型（多选）</label>
                                                <div class="col-sm-4 i-input-parent">
                                                    <div class="checkbox i-checks">
                                                        <label>
                                                            <input type="checkbox" value="" name="escort"> <i></i>住院普通陪护
                                                        </label>
                                                    </div>
                                                    <div class="checkbox i-checks">
                                                        <label>
                                                            <input type="checkbox" value="" name="escort"> <i></i> 住院产科陪护
                                                        </label>
                                                    </div>
                                                    <div class="checkbox i-checks">
                                                        <label>
                                                            <input type="checkbox" value="" name="escort"> <i></i> 居家普通陪护
                                                        </label>
                                                    </div>
                                                    <div class="checkbox i-checks">
                                                        <label>
                                                            <input type="checkbox" value="" name="escort"> <i></i> 月嫂
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="col-sm-2 i-input-error"></div>
                                            </div>
                                            <div class="hr-line-dashed"></div>
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label">个人亮点</label>
                                                <div class="col-sm-3">
                                                    <textarea class="form-control" name="bright" maxlength="20"/></textarea>
                                                </div>
                                                <div class="col-sm-3">
                                                    <span class="prompt">（20字以内）</span>
                                                </div>
                                            </div>
                                            <div class="hr-line-dashed"></div>
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label">服务案例</label>
                                                <div class="col-sm-5">
                                                    <div class="mt-group" id="serviceCase">
                                                    </div>
                                                    <button class="btn btn-info" type="button" id="addCase">+添加服务案例</button>
                                                </div>
                                                <div class="col-sm-4">
                                                    <div class="ibox float-e-margins">
                                                        <div class="ibox-title">
                                                            <h5>填写示例</h5>
                                                        </div>
                                                        <div class="ibox-content">
                                                            <p>服务时间：2017.01.01 - 2017.07.02</p>
                                                            <p>陪护类型：住院普通陪护</p>
                                                            <p>服务对象：70岁帕金森病人</p>
                                                            <p>服务内容：提醒患者按时用药；每天一次带患者取户外散步；帮助患者进食；</p>
                                                            <p>客户评价：为人亲切，照顾十分周到</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="hr-line-dashed"></div>
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label">培训经验</label>
                                                <div class="col-sm-6">
                                                    <div class="mt-group" id="traninList"> 
                                                    </div>
                                                    <button class="btn btn-info" type="button" id="addTranin">+添加培训经验</button>
                                                </div>
                                            </div>
                                            <div class="hr-line-dashed"></div>
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label">自我评价</label>
                                                <div class="col-sm-3">
                                                    <textarea class="form-control" name="my_assess" maxlength="50" /></textarea>
                                                </div>
                                                <div class="col-sm-3">
                                                    <span class="prompt">（50字以内）</span>
                                                </div>
                                            </div>
                                            <div class="hr-line-dashed"></div>
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label">个人证件</label>
                                                <div class="col-sm-6">
                                                    <div class="mt-group">
                                                        <div class="form-group">
                                                            <span class="col-sm-2">身份证</span>
                                                            <div class="col-sm-10">
                                                                <div class="upload-btn prove_up">
                                                                    <input type="file" name="id_card" id="id_card" multiple="multiple" />
                                                                    <button class="btn btn-default"><i class="fa fa-upload"></i>上传身份证</button>
                                                                    <span class="imgs"></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <span class="col-sm-2">健康证</span>
                                                            <div class="col-sm-10">
                                                                <div class="upload-btn prove_up">
                                                                    <input type="file" name="health_prove" id="health_prove" multiple="multiple" />
                                                                    <button class="btn btn-default"><i class="fa fa-upload"></i>上传健康证</button>
                                                                    <span class="imgs"></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <span class="col-sm-2">月嫂证</span>
                                                            <div class="col-sm-10">
                                                                <div class="upload-btn prove_up">
                                                                    <input type="file" name="ys_prove" id="ys_prove" multiple="multiple" />
                                                                    <button class="btn btn-default"><i class="fa fa-upload"></i>上传月嫂证</button>
                                                                    <span class="imgs"></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <span class="col-sm-2">育婴证</span>
                                                            <div class="col-sm-10">
                                                                <div class="upload-btn prove_up">
                                                                    <input type="file" name="nursery_prove" id="nursery_prove" multiple="multiple" />
                                                                    <button class="btn btn-default"><i class="fa fa-upload"></i>上传育婴证</button>
                                                                    <span class="imgs"></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div id ="prove">
                                                        </div>
                                                        <button class="btn btn-info" type="button" id="add_prove">+添加其他证件</button>
                                                    </div>
                                                </div>
                                            </div>
                                             <div class="hr-line-dashed"></div>
                                             <div class="form-group">
                                                <div class="col-sm-4 col-sm-offset-2">
                                                    <button class="btn btn-info btn-lg" type="submit">完成</button>
                                                    <button class="btn btn-white btn-lg" type="botton">取消</button>
                                                </div>
                                             </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 全局js -->
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>
    <script src="js/plugins/layer/laydate/laydate.js"></script>
    <script src="js/plugins/iCheck/icheck.min.js"></script>
    <script src="js/plugins/validate/jquery.validate.min.js"></script>
    <script src="js/plugins/validate/messages_zh.min.js"></script>
    <script src="js/jquery.tmpl.min.js"></script>
    <script id="caseItem" type="text/x-jquery-tmpl">
        <div class="service_case">
            <div class="form-group">
                <span class="col-sm-4">服务开始时间</span>
                <div class="col-sm-6">
                    <input class="form-control layer-date sevice-date" placeholder="请选择服务开始时间" name="begin_time${id}" id="startTime${id}">
                </div>
            </div>
            <div class="form-group">
                <span class="col-sm-4">服务结束时间</span>
                <div class="col-sm-6">
                    <input class="form-control layer-date sevice-date" placeholder="请选择服务结束时间" name="end_time${id}" id="endTime${id}">
                </div>
            </div>
            <div class="form-group">
                <span class="col-sm-4">陪护类型</span>
                <div class="col-sm-6">
                    <input type="text" class="form-control" name="attend_type${id}">
                </div>
            </div>
            <div class="form-group">
                <span class="col-sm-4">服务对象</span>
                <div class="col-sm-6">
                    <input type="text" class="form-control" name="attend_name${id}">
                </div>
            </div>
            <div class="form-group">
                <span class="col-sm-4">服务内容</span>
                <div class="col-sm-6">
                    <textarea class="form-control" name="service${id}"></textarea>
                </div>
            </div>
            <div class="form-group">
                <span class="col-sm-4">客户评价</span>
                <div class="col-sm-6">
                    <textarea class="form-control" name="eval${id}"></textarea>
                </div>
            </div>
            <div class="hr-line-dashed"></div>
            <a class="deletesItem"><i class="fa fa-times"></i></a>
        </div>
    </script>
    <script id="traninItem" type="text/x-jquery-tmpl">
        <div class="tranin_his">
            <div class="form-group">
                <span class="col-sm-3">培训开始时间</span>
                <div class="col-sm-6">
                    <input class="form-control layer-date" placeholder="请选择培训开始时间" name="tranin_start${id}" id="tranin_start${id}" />
                </div>
            </div>
            <div class="form-group">
                <span class="col-sm-3">培训结束时间</span>
                <div class="col-sm-6">
                    <input class="form-control layer-date" placeholder="请选择培训开始时间" name="tranin_end${id}" id="tranin_end${id}" />
                </div>
            </div>
            <div class="form-group">
                <span class="col-sm-3">培训项目</span>
                <div class="col-sm-6">
                    <input type="text" class="form-control" name="tranin_item${id}">
                </div>
            </div>
            <div class="form-group">
                <span class="col-sm-3">培训内容</span>
                <div class="col-sm-6">
                    <input type="text" class="form-control" name="tranin_main${id}">
                </div>
            </div>
                <div class="hr-line-dashed"></div>
                <a class="deletetItem"><i class="fa fa-times"></i></a>
            </div>
        </div>
    </script>
      <script id="proveItem" type="text/x-jquery-tmpl">
        <div class="prove_box">
            <div class="form-group">
                <span class="col-sm-3"><input type="text" class="form-control" name="prove${index}"/></span>
                <div class="col-sm-9">
                    <div class="upload-btn prove_up">
                        <input type="file" name="prove_file${index}" multiple="multiple" />
                        <button class="btn btn-default"><i class="fa fa-upload"></i>上传证书</button>
                        <span class="imgs"></span>
                    </div>
                </div>
            </div>
            <a class="deleteprove"><i class="fa fa-times"></i></a>
        </div>
    </script>
    <script>
        $(document).ready(function () {
            $('.i-checks').iCheck({
                checkboxClass: 'icheckbox_square-green',
                radioClass: 'iradio_square-green',
            });
           
            // 手机号码验证  
            jQuery.validator.addMethod("isMobile", function(value, element) {  
                var length = value.length;  
                var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;  
                return this.optional(element) || (length == 11 && mobile.test(value));  
            }, "请正确填写手机号码");
            var icon = "<i class='fa fa-times-circle'></i> ";
             // 验证表单
            function validform(){
                return $("#worker_form").validate({
                    rules : {
                        headimg : {
                           required : true
                        },
                        worker_name : {
                            required : true
                        },
                        worker_mobile : {
                            required : true,
                            isMobile : true
                        },
                        birthday : {
                            required : true
                        },
                        escort : {
                            required : true
                        }
                    },
                    messages : {
                        headimg :{
                            required : icon+'必须上传头像',
                        },
                        worker_name : {
                            required : icon+'护工姓名必填',
                        },
                        worker_mobile : {
                            required : icon+'联系电话必填',
                            isMobile : icon+"请正确填写手机号码" 
                        },
                        birthday : {
                            required : icon+'生日必选',
                        },
                        escort : {
                            required : icon+'陪护类型必选',
                        }
                    },
                    errorPlacement: function (error, element) { 
                        if(element.is(':file')){
                            $(".headImg-btn").append(error);
                        }else{
                            var error_box = element.parents('.i-input-parent').siblings('.i-input-error');
                            error_box.html(error);
                        }
                    }
                });
            }
            $("#nextStep").click(function(){
                if(validform().form()) {
                    $('#tabs a[href="#skillInfo"]').tab('show'); 
                }
            });
            // 头部切换
            $("#tabs a").click(function(){
                // if($(this).attr('href')=='#skillInfo'){
                //     if(validform().form()) {
                //        $(this).tab('show');
                //     }
                // }else{
                    $(this).tab('show');
                // }
            })        
            // 添加案例
           var case_index = 0;
           var case_num = [{id:case_index}];
           $("#caseItem").tmpl(case_num).appendTo("#serviceCase");
           $(".service_case").eq(0).find(".deletesItem").remove();
           $("#addCase").click(function(){
               case_index = case_index + 1;
               case_num = [{id:case_index}];
                $("#caseItem").tmpl(case_num).appendTo("#serviceCase");
                // 点击删除
                $(".deletesItem").click(function(){
                   $(this).parent(".service_case").remove();
                   case_index = case_index - 1;
                })
                addTime(case_index);
           })
           addTime(case_index);
            // 服务时间选择
           function addTime(index){
                $('#startTime'+index).click(function(){
                    var end_time = $('#endTime'+index).val();
                    laydate({
                        elem: '#startTime'+index,
                        format: 'YYYY/MM/DD',
                        min:'',
                        max: end_time, 
                        choose: function (datas) {
                     
                        }
                    })
              });
              $('#endTime'+index).click(function(){
                    var start_time = $("#startTime"+index).val();
                    laydate({
                        elem: '#endTime'+index,
                        format: 'YYYY/MM/DD',
                        min: start_time,
                        choose: function (datas) {
                           
                        }
                    })
              });
            }
            // 添加培训经历
           var tranin_index = 0;
           var tranin_num = [{id:tranin_index}];
           $("#traninItem").tmpl(tranin_num).appendTo("#traninList");
           $(".tranin_his").eq(0).find(".deletetItem").remove();
           $("#addTranin").click(function(){
               tranin_index = tranin_index + 1;
               tranin_num = [{id:tranin_index}];
                $("#traninItem").tmpl(tranin_num).appendTo("#traninList");
                // 点击删除
                $(".deletetItem").click(function(){
                   $(this).parent(".tranin_his").remove();
                   tranin_index = tranin_index - 1;
                })
                addTraninTime(tranin_index);
           })
           addTraninTime(tranin_index);
            //  培训时间选择
           function addTraninTime(index){
                $('#tranin_start'+index).click(function(){
                    var end_time = $('#tranin_end'+index).val();
                    laydate({
                        elem: '#tranin_start'+index,
                        format: 'YYYY/MM/DD',
                        min:'',
                        max: end_time, 
                        choose: function (datas) {
                     
                        }
                    })
              });
              $('#tranin_end'+index).click(function(){
                    var start_time = $("#tranin_start"+index).val();
                    laydate({
                        elem: '#tranin_end'+index,
                        format: 'YYYY/MM/DD',
                        min: start_time,
                        choose: function (datas) {
                           
                        }
                    })
              });
            }
            // 添加证书
           var prove_index = 0;
           $("#add_prove").click(function(){
               prove_index = prove_index+1;
               var prove_num = [{index:prove_index}];
              $("#proveItem").tmpl(prove_num).appendTo("#prove");
              $(".deleteprove").click(function(){
                   $(this).parent(".prove_box").remove();
                   prove_index = prove_index - 1;
                })
              upload_pro();
           })

            // 上传头像
            $("#img-file").change(function(){
               preview(this);
            })
            function preview(file) {//预览图片得到图片base64
                    var prevDiv = $('.headImg-show');
                    if (file.files && file.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function(evt){
                        prevDiv.html('<img src="' + evt.target.result + '" />');
                    }
                    reader.readAsDataURL(file.files[0]);
                    }
                }

                // 上传证件照
                function upload_pro(){
                    $(".prove_up").find("input").on("change",function(){
                         $(this).siblings(".imgs").append($(this).val()+'；');	
                    })
                }
                upload_pro();
     
   

});
        
         

    </script>



</body>

</html>